<script setup lang="ts">
import { ref, onMounted } from 'vue';

const emit = defineEmits(['showSizeChange']);
const props = defineProps<{
	total: number;
}>()
const pageSize = ref(20);
const current = ref(1);
const onShowSizeChange = (current: number, pageSize: number) => {
	emit('showSizeChange', current, pageSize);
};

onMounted(() => {
	emit('showSizeChange', current.value, pageSize.value);
});

</script>

<template>
	<div class="flex justify-end p20 bg-white">
		<a-pagination v-model:current="current" v-model:pageSize="pageSize" show-size-changer :total="props.total"
			@showSizeChange="onShowSizeChange" />
	</div>
</template>
<style scoped></style>
